<template>
   <div class="create-project-form">
     <el-form :model="projectForm" label-width="100px">
       <el-form-item label="项目名称">
         <el-input v-model="projectForm.name" placeholder="请输入项目名称"></el-input>
       </el-form-item>
       <el-form-item label="排序">
         <el-input v-model="projectForm.order" placeholder="请输入排序"></el-input>
       </el-form-item>
       <el-form-item label="项目简介">
         <el-input type="textarea" v-model="projectForm.description" placeholder="请输入项目简介"></el-input>
       </el-form-item>
       <el-form-item>
         <el-button type="primary" @click="submitForm">创建项目</el-button>
       </el-form-item>
     </el-form>
   </div>
</template>

<script setup>
import { ref } from 'vue'
import http from '../../http'

const projectForm = ref({
   name: '',
   order: '',
   description: ''
})

const submitForm = () => {
   // 提交表单的逻辑
   console.log('提交的项目信息:', projectForm.value)
   // 假设这是调用后端API的代码
   http.post('project/', projectForm.value)
     .then(response => {
       console.log('项目创建成功:', response.data)
       // 可以在这里处理成功后的逻辑，比如重置表单或跳转到其他页面
       alert('项目创建成功')
     })
     .catch(error => {
       console.error('项目创建失败:', error)
       // 可以在这里处理错误后的逻辑，比如显示错误信息
       alert('项目创建失败')
     })
}
</script>

<style scoped>
.create-project-form {
   max-width: 600px;
   margin: 0 auto;
}
</style>